
<template>
  <div class="main-div">
    <Row>
      <Col span="4" >
      <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask" />
      </Col>

      <Col span="20" >

      <Card dis-hover class="task-card">
        <div class="app-container">
          <el-row type="flex" justify="start"  style="margin-left: -14px">
            <el-form :inline="true" :model="queryForm" label-width='80px' inline  size='mini'>
                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="queryForm.times"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    unlink-panels
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :picker-options="pickerOptions"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>

              <el-form-item label="状态" clearable>

                <el-select v-model='queryForm.disabled' clearable>

                  <el-option  value="true" label="已发布"></el-option>
                  <el-option  value="false" label="草稿"></el-option>
                </el-select>

              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>

          </el-row>

          <el-row class="margin:30px;">
            <el-col>
              <el-table
                :data="tableData"
                size="mini"
                style="width: 100%"
                :height="tableHeight"
                border
                @select="tableSelect"
                @select-all="tableSelect"
              >
                <el-table-column
                  fixed
                  prop="typeTitle"
                  label="分类名称"
                  show-overflow-tooltip
                />

                <el-table-column
                  prop="defId"
                  label="定义id"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  show-overflow-tooltip
                />
                <el-table-column
                  prop="disabled"
                  label="状态"
                  show-overflow-tooltip
                >
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.disabled" type="success">已发布&nbsp; </el-tag>
                    <el-tag v-else type="warning">&nbsp; 草稿 &nbsp; </el-tag>
                  </template>

                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="100"
                >
                  <template slot-scope="scope">
                    <Button v-if="scope.row.disabled==false"  type="primary" size="small"   @click="details(scope.row)" ghost>发起</Button>

                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-pagination
              background
              :current-page="queryForm.page"
              :page-size="queryForm.pageSize"
              layout="total, prev, pager, next, jumper"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>
      </Card>
      </Col>

    </Row>
  </div>

</template>

<script>
import { getUnReadList, getAllMsgType, tagReadMsg } from '@/api/msg'
import { getStartUpRuningList } from '@/api/startup'
import { getTaskData, getTaskChartData, getBpmnModelCategory } from '@/api/analy'
import { getDraft } from '@/api/loadwfmodule'

import Footer from '../../../common/footer'

export default {
  name: 'Task',
  components: {
    Footer
  },

  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      checkTableData: [],
      tableData: [],
      tableHeight: 450,
      total: 0,
      chartVisible: false,
      chartData: {},
      sellerId: 0,
      queryDate: [],
      shopName: [],
      queryForm: {
        start: "",
        end: "",
        times: [],
        page: 0,
        limit: 10,
        whereSql: '',
        groupId: '',
        disabled: ''
      },
      categoryData: [
      ]
    }
  },
  mount() {
    this.getData()
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
  },

  created() {
    this.getData()
  },
  methods: {
    remove: function() {
      var checkTableData = this.checkTableData
      var ids = []

      for (var i = 0; i < checkTableData.length; i++) {
        ids.push(checkTableData[i].id)
      }
      tagReadMsg({ ids: ids }).then((response) => {
        if (response.code == 0) {
          this.checkTableData = []
          this.getData()
        }
      })
    },
    tableSelect: function(data) {
      this.checkTableData = data
    },
    queryFormCreateTime: function(e) {
      this.queryForm.createTime = e
    },
    details: function(data) {
      this.$router.push({ name: 'draftStart', params: {
        t: new Date().getTime(),
        modelKey: data.defKey,
        draftId: data.id,
        formData: data.formDataStr

      }})
    },
    queryMethod: function() {


      this.getDraft()
    },
    refreshTask: function(data) {
      this.queryForm.times = [];
      this.queryForm.start = "";
      this.queryForm.end = "";
      this.queryForm.page = 0

      if (data) {
        if (data[0]) {
          if (data[0].parentId) {
            if (data[0].parentId == '-1') {
              this.queryForm.groupId = ''
            } else {
              this.queryForm.groupId = data[0].id
            }
            this.queryForm.whereSql = ''
            this.queryForm.disabled = ''
            this.getDraft()
          }
        }
      }
    },
    getDraft: function() {

      const obj = JSON.parse(JSON.stringify(this.queryForm))
      delete (obj['times'])
      getDraft(obj).then((response) => {
        this.tableData = response.data
        this.total = parseInt(response.count)
      })
    },
    getData: function() {
      getBpmnModelCategory().then((response) => {
        this.categoryData = response.data
      })
      this.getDraft()
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getData()
    },

    search() {
      this.queryForm.page = 0
      this.queryForm.typeKey = ''
      if (this.queryForm.times){

        this.queryForm.start=this.queryForm.times[0]
        this.queryForm.end=this.queryForm.times[1]
      }
      this.queryMethod()
    },
    reset() {
      this.queryForm.page = 0
      this.queryForm.typeKey = ''
      this.queryForm.title = ''
      this.queryForm.disabled = ''
      this.queryDate = []
      this.queryForm.times = [];
      this.queryForm.start = "";
      this.queryForm.end = "";
      this.getDraft()
    }

  }

}

</script>
<style lang="scss">
.task-card{
  margin-top: 10px;
}

</style>
